
import axios from "@/utils/request"
import Vue from "vue"
import { VueEditor } from "vue2-editor";
Vue.component('VueEditor', VueEditor)
//引入后还需要在vue.config.js配置
import { Quill } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

const editorToolbar = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    [{ 'align': ['', 'center', 'right', 'justify'] }],
    [{ 'header': [false, 1, 2, 3, 4, 5, 6] }],
    ['blockquote'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    ['link', 'image'],
    ['clean'],
]
const editorOptions = {
    modules: {
        imageDrop: true,//图片拖入,突变转为base64
        imageResize: {//图片缩放
            displayStyles: {},
            modules: ['Resize', 'DisplaySize', 'Toolbar']
        }
    }
}
export default (_self, h) => {
    return h(
        "vue-editor",
        {
            props: {
                value: _self.obj.value,
                useCustomImageHandler: true,//false上传图片是base64,true需要接口，回显url
                editorToolbar,
                editorOptions
            },
            attrs: {
                disabled: !_self.obj.status,
                id: _self.obj.elementName + new Date().getTime(),
                placeholder: _self.obj.placeholder || "这是一个输入框",
            },
            on: {
                input(e) {
                    _self.obj.value = e
                },
                'image-added'(file, Editor, cursorLocation, resetUploader) {
                    var formData = new FormData();
                    formData.append("file", file);

                    axios({
                        url: "/test/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
                        method: "POST",
                        data: formData,
                    })
                        .then(result => {
                            let url = result.data.data.path; // Get url from response
                            Editor.insertEmbed(cursorLocation, "image", url);
                            resetUploader();
                        })
                        .catch(err => {
                            console.log(err);
                        });
                }
            }
        },
    );
};
export let vueEditorConf = {
    status: true, // 启用状态，true启用；0停用
    elementWidth: "100%",
    elementType: "vueEditor",// 对应数据库内类型
    elementName: "编辑器",// 控件左侧label内容
    placeholder: '',
    value: '', // 绑定的值
    icon: "el-icon-edit-outline",
    required: false,// 是否必填
    rules: []
};
